<template>
    <el-dialog :title="title" :visible.sync="open" width="700px" append-to-body @close="resetForm">
        <span style='font-size: 17px;'>基本信息</span>
        <el-form ref="form" :model="form" label-width="120px" style='margin-top: 20px;'>
            <template v-if="title == '新增用户组'">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="用户组名称：" prop="name" :verify="verifyName">
                            <el-input v-model="form.name" clearable placeholder="请输入用户组姓名" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="类型：" prop="orgTypeName" verify>
                            <el-input v-model="form.type" disabled placeholder="普通用户组" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </template>
            <template v-else>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="用户组名称：" prop="name" :verify="verifyName">
                            <el-input v-model="form.name" clearable :disabled="title == '查看用户组' ? true : false"
                                placeholder="请输入用户组" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="用户组编码：">
                            <el-input v-model="form.code" disabled />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="类型：" prop="orgTypeName" verify>
                            <el-input v-model="form.type" disabled placeholder="普通用户组" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </template>


            <el-row>
                <el-col :span="24">
                    <el-form-item label="用户：" prop="role" :verify="verifyUser">
                        <div class="border">
                            <el-tag v-for="tag in form.userNames" :key="tag" :closable="title == '查看用户组' ? false : true"
                                @close="handleRemove(tag)">{{ tag }}</el-tag>
                            <div class="add">
                                <el-button plain size="mini" icon="el-icon-plus" :disabled="title == '查看用户组'"
                                    @click="handleinit('1')">添加</el-button>
                            </div>
                        </div>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="描述：">
                        <el-input type="textarea" onkeyup="value=value.replace(/[^\w\u4E00-\u9FA5]/g, '')" resize="none"
                            v-model="form.des" show-word-limit maxlength="50" placeholder="请输入"
                            :disabled="title == '查看用户组' ? true : false" />
                    </el-form-item>
                </el-col>
            </el-row>

            <userGroupDialog ref="userGroupDialog" @emitplayer="emitplayer"></userGroupDialog>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
        </div>
    </el-dialog>
</template>
<script>
import userGroupDialog from "@/components/common/userGroupDialog/index.vue";
import { generateUserName } from "../../../api/system/role";
import { addSystemUserGroup, systemUserGroupDetail, updateSystemUserGroup, userList } from "../../../api/system/userGroup";
import { forEach } from "min-dash";

let defaultForm = {
    orgTypeName: "普通用户组",
    name: '',
    des: '',
    orgType: 1,
    userIds: [],
    userNames: [],
}
export default {
    components: { userGroupDialog },
    data() {
        return {
            title: "",
            id: 0,
            form: JSON.parse(JSON.stringify(defaultForm)),
            open: false,
        };
    },
    methods: {
        handleadd(type, item) {

            if (type == "0") {
                //新增用户组
                this.open = true;
                this.title = "新增用户组";
            } else if (type == "2") {
                //编辑用户组
                this.id = item;
                this.title = "编辑用户组";
                systemUserGroupDetail({ id: item }).then((response) => {
                    this.form = Object.assign(this.form, response.data);
                    this.open = true;
                });
            } else {
                //查看用户组
                this.title = "查看用户组";
                systemUserGroupDetail({ id: item }).then((response) => {
                    this.form = Object.assign(this.form, response.data);
                    this.open = true;
                });
            }
        },

        // 删除用户
        handleRemove(val) {
            let index = this.form.userNames.indexOf(val)
            this.form.userNames.splice(index, 1);
            this.form.userIds.splice(index, 1);
        },
        emitplayer(Ids = []) {
            let userIds = Ids.map((item) => {
                return item.userId;
            });
            let userNames = Ids.map((item) => {
                return item.userName;
            });
            this.$set(this.form, "userIds", userIds);
            this.$set(this.form, "userNames", userNames);
        },
        handleinit(type) {
            let userGroup = []
            if (this.form.userIds) {
                this.form.userIds.forEach((item, index) => {
                    let temp = {
                        userId: item,
                        userName: this.form.userNames[index]
                    }
                    userGroup.push(temp)
                });
            }
            this.$refs.userGroupDialog.init("", userGroup || []);
        },
        changeInput(string) {
            this.$nextTick(() => {

            });
        },
        /** 提交按钮 */
        submitForm() {

            if (this.title == "查看用户组") {
                this.open = false;
            } else {
                console.log(this.form, '9898', this.$refs.form)

                let form = JSON.parse(JSON.stringify(this.form));
                if (form.name == '') {
                    this.$modal.msgError("用户组名称不能为空");
                    return
                }
                if (form.userNames.length == 0) {
                    this.$modal.msgError("用户不能为空");
                    return
                }
                if (this.title == "新增用户组") {
                    addSystemUserGroup(form).then((response) => {
                        this.open = false;
                        this.$modal.msgSuccess("新增成功");
                        this.$emit("getList");
                    });
                } else if (this.title == "编辑用户组") {
                    let params = Object.assign(form, { id: this.id })
                    updateSystemUserGroup(form).then((response) => {
                        this.open = false;
                        this.$modal.msgSuccess("变更成功");
                        this.$emit("getList");
                    });
                }

            }
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.resetForm();
        },
        /** 重置按钮操作 */
        resetForm() {
            this.form = JSON.parse(JSON.stringify(defaultForm))
        },
        verifyName(rule, val, callback) {
            if (val) {
                if (val.length > 50) callback(Error('用户组名称支持输入1-50个字'));
                let re = /^[\u4E00-\u9FA5A-Za-z]+$/;
                if (!re.test(val)) callback(Error('支持中文、英文（区分大小写）'));
                else callback();
            } else {
                callback();
            }
        },
        verifyUser(rule, val, callback) {
            callback();
            if (val) {
                callback();

            } else {
                callback();
            }
        },
    },
};
</script>
<style scoped>
.border {
    width: 100%;
    /* height: 30px; */
    height: auto;
    min-height: 30px;
    border-radius: 5px;
    border: 1px solid #dfe4ed;
}

::v-deep .border-bottom {
    border-bottom: 1px solid #f4f6fa;

    .el-button--small {
        padding: 0px 10px;
    }
}

.border-left {
    border-left: 1px solid #f4f6fa;
}

.border-right {
    border-right: 1px solid #f4f6fa;
}

.add {
    display: inline-block;
}
</style>